<script lang="ts" setup>
import { deleteAddressByIdAPI, getAddressAPI } from '@/apis/address';
import { AddressItem } from '@/types/global';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { useAddressStore } from '@/stores/modules/addressStore'

// 接收路由参数
const props = defineProps<{ from?: string }>();

const { safeAreaInsets } = uni.getSystemInfoSync();

const addressStore = useAddressStore();

// 收货地址列表
const addressList = ref<AddressItem[]>([]);
const getAddress = async () => {
  const response = await getAddressAPI().request;
  addressList.value = response.result;
  // 设置默认选中地址
  if (!addressStore.selectedAddress) addressStore.setSelectedAddress(response.result.find(a => a.isDefault));
};

// 删除地址
const onAddressDelete = (id: string) => {
  uni.showModal({
    content: '是否删除此地址？',
    success: async () => {
      await deleteAddressByIdAPI(id).request;
      uni.showToast({ icon: 'none', title: '删除成功！' });
      getAddress();
    },
  });
};

// 修改选中的收货地址
const onSelectedAddressChange = (item: AddressItem) => {
  if (props.from === 'order') {
    addressStore.setSelectedAddress(item);
    uni.navigateBack({ success: () => uni.showToast({ icon: 'success', title: '已选择收货地址！' }) });
  }
};

onShow(() => {
  getAddress();
});
</script>

<template>
  <view class="viewport" :style="{ paddingBottom: `${safeAreaInsets?.bottom || 0}px` }">
    <!-- 地址列表 -->
    <scroll-view class="scroll-view" scroll-y>
      <view class="address">
        <uni-swipe-action class="address-list">
          <!-- 收货地址项 -->
          <uni-swipe-action-item class="item" v-for="item in addressList" :key="item.id">
            <view class="item-content" @tap="onSelectedAddressChange(item)">
              <view class="user">{{ item.receiver }}
                <text class="contact">{{ item.contact }}</text>
                <text class="badge" v-if="!from && item.isDefault">默认</text>
                <text class="badge" v-if="from === 'order' && item.id === addressStore.selectedAddress?.id">当前选中</text>
              </view>
              <view class="locate">{{ item.fullLocation }}</view>
              <navigator class="edit" hover-class="none" :url="`/pagesMember/address-form/address-form?id=${item.id}`"
                @tap.stop>
                修改
              </navigator>
            </view>
            <!-- 右侧插槽 -->
            <template #right>
              <button class="delete-button" @tap="onAddressDelete(item.id)">删除</button>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <view class="blank" v-if="addressList.length === 0">暂无收货地址</view>
    </scroll-view>
    <!-- 添加按钮 -->
    <view class="add-btn">
      <navigator hover-class="none" url="/pagesMember/address-form/address-form">新建地址</navigator>
    </view>
  </view>
</template>

<style lang="scss">
.viewport {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;

  .scroll-view {
    padding-top: 20rpx;
    flex: 1;
  }
}

.address {
  margin: 0 20rpx;
  padding-left: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  overflow: hidden;

  .item-content {
    position: relative;
    border-bottom: 1rpx solid #ddd;
    padding: 20rpx 10rpx;
    line-height: 2;

    .edit {
      position: absolute;
      top: 50%;
      right: 0;
      padding-left: 40rpx;
      border-left: 1rpx solid #ddd;
      font-size: 28rpx;
      color: #27ba9b;
      line-height: 2;
      transform: translate(-50%, -50%);
    }
  }

  .item:last-child .item-content {
    border: none;
  }

  .user {
    font-size: 28rpx;
    color: #333;

    .contact {
      color: #666;
    }

    .badge {
      padding: 4rpx 10rpx;
      margin: 2rpx 0 0 10rpx;
      font-size: 26rpx;
      color: #27ba9b;
      border-radius: 6rpx;
      border: 1rpx solid #27ba9b;
    }
  }

  .locate {
    line-height: 1.6;
    font-size: 26rpx;
    color: #333;
  }
}

.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}

.add-btn {
  margin: 30rpx 20rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}

.delete-button {
  width: 100rpx;
  height: 100%;
  background-color: #cf4444;
  border-radius: 0;
  padding: 0;
  font-size: 28rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>